@import "./reset";
@media screen and (min-width:1200px){
    .container{
        width: 1000px !important;
    }
}
@mixin flex_a {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
@mixin flex_b {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
// 使文本元素在小屏下居中
@mixin center {
    @media (max-width: 992px) {
        text-align: center;
    }
}
// 让块级元素居中
.center{
    margin: 0 auto !important;
    display: block;
}
.navbar{
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    .container{
        .navbar-header{    //logo部分
            margin-left: 15px;
            a{
                display: block;
                display: flex;
                align-items: center;
                padding:0;
            }
        }
        a{
            @media (max-width: 992px){
                padding: 15px 3px;
            }
        }
    }
    li{
        &:hover{
            background-color: #080808;
        }
    }
}
footer{
    height: 113px;
    background-color: #3b3b3b;
    .container{
        position:relative;
        .footer_left{
            height: 113px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            a{
                text-decoration: none;
                color: #a1a3ab;
                &:hover{
                    color: #ffffff;
                }
            }
            span{
                margin-top: 5px;
                color:#a1a3ab;
            }
        }
        .footer_right{
            position: absolute;
            bottom: 37px;
            right: 15px;
            width: 164px;
            text-align: center;
            .img{
                position: absolute;
                width: 142px;
                height: 150px;
                bottom: 43px;
                right: 15px;   
                visibility: hidden;
                .box{
                    padding: 8px;
                    width: 142px;
                    height: 142px;
                    background-color: #ffffff;
                    img{
                        vertical-align: middle;
                    }
                }
                // 三角形
                .triangle{
                    width: 0;
                    height: 0;
                    border-top: 8px solid #ffffff;
                    border-left: 8px solid transparent;
                    border-right: 8px solid transparent;
                }
                // 通过浮动使最后一个小三角靠右
                &:last-of-type{
                    .triangle{
                        float:right;
                    }
                    
                }
            }
            a{
                display: inline-block;
                width: 38px;
                height: 38px;
                &:hover+div{
                    visibility: visible;
                }
                &:nth-of-type(2){
                    margin: 0 20px;
                }
            }
            
        }
    }
}
